<template>
	<view class="container">
		<view class="case-left" v-for="(item,index) in constructionList" :key="index">
			<navigator :url="'work_details/work_details?id='+item.id">
				<image class="case-image" :src="item.thumb"></image>
				<view class="case-details">
					<view class="case-details-text">{{item.name}}</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pages: {
					"page": 1,
					"limit": 10
				},
				constructionList: []
			}
		},
		methods: {
			getConstructionList() {
				this.$http.post('/system/getConstructionList', this.pages).then(res => {
					if (res.data.code == 100002) {
						return
					}
					this.pages.page = res.data.data.page
					this.pages.limit = res.data.data.limit
					this.constructionList = res.data.data.list
				})
			}
		},
		onLoad() {
			this.getConstructionList()
		},
		onReachBottom() {
			this.pages.page = this.pages.page + 1
			this.getConstructionList()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;

		.case-left {
			margin-top: 40rpx;
			width: 670rpx;
			height: 670rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			background: rgba(0, 0, 0, 0.10);

			.case-image {
				width: 670rpx;
				height: 406rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			.case-details {
				width: 670rpx;
				height: 74rpx;
				background: #ffffff;
				border-radius: 0rpx 0rpx 12rpx 12rpx;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.10);
				margin-top: -10rpx;

				.case-details-text {
					padding-top: 20rpx;
					margin: auto;
					font-size: 24rpx;
					text-align: CENTER;
					line-height: 24rpx;
				}
			}
		}
	}
</style>
